<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0.2rem;"><img src="img/tx.webp" style="width: 0.5rem; height: 0.5rem;"></div>
    	<div style="color: #fff;  font-weight: bold;">客户详情</div>
    </div>
    <div style="padding: 0.3rem 0;">
    	<div class="yy">
    		<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">开发区万光科技产业园</div>
    		<div class="flex">
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">跟进状态</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">意向</div>
    				<div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
    				<div style="color: #666; font-size: 0.2rem;" >2022-1-2 13:06:39</div>
    			</div>
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">客户类型</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">重要客户</div>
    				<div style="color: #999; margin-bottom: 0.1rem;">最近一次拜访</div>
    				<div style="color: #666; font-size: 0.2rem;">2022-1-2 13:06:39</div>
    			</div>
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">联系电话</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">155XXXXX654</div>
    				<div style="color: #999; margin-bottom: 0.1rem;">客户状态</div>
    				<div style="color: #666; font-size: 0.2rem;">已审批</div>
    			</div>
    		</div>
    	</div>
    	<div class="flex" style="margin-bottom: 0.3rem;">
    		<div :class="act == 1?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">基本信息</div>
    		<div :class="act == 2?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">联系人</div>
    		<div :class="act == 3?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">拜访记录</div>
    	</div>

    	<div v-if="act == 1">
    		<div style="margin-bottom: 0.3rem; font-size: 0.3rem;">基本信息</div>
    		<div style="font-size: 0.3rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">公司名称</div>
    				<div style="flex-grow: 1; color: #666;">烟台开发区万光科技产业园</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">客户来源</div>
    				<div style="flex-grow: 1; color: #666;">主动拜访</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">所属行业</div>
    				<div style="flex-grow: 1; color: #666;">事业单位</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">人员规模</div>
    				<div style="flex-grow: 1; color: #666;">500人以上</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">备注</div>
    				<div style="flex-grow: 1; color: #666;"></div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">传真</div>
    				<div style="flex-grow: 1; color: #666;">00011102123</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">官网</div>
    				<div style="flex-grow: 1; color: #666;">http://www.saqw.cn</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">地区</div>
    				<div style="flex-grow: 1; color: #666;">山东省淄博市张店区</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">邮编</div>
    				<div style="flex-grow: 1; color: #666;">264000</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">详细地址</div>
    				<div style="flex-grow: 1; color: #666;">开发区长江路1号</div>
    			</div>
    		</div>

    		<div style="margin-bottom: 0.3rem; font-size: 0.3rem;">其他信息</div>
    		<div style="font-size: 0.3rem; margin-bottom: 0.5rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">负责人</div>
    				<div style="flex-grow: 1; color: #666;">张丽丽</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">创建时间</div>
    				<div style="flex-grow: 1; color: #666;">2022-1-2 13:06:39</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">最近一次修改时间</div>
    				<div style="flex-grow: 1; color: #666;">2022-1-2 13:06:39</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">上一任负责人</div>
    				<div style="flex-grow: 1; color: #666;">赵海燕</div>
    			</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="info" size="small" style="margin-right: 0.2rem;">写拜访</van-button>
    			<van-button type="info" size="small" style="margin-right: 0.2rem;">退回公海</van-button>
    			<van-button type="info" size="small" style="margin-right: 0.2rem;">编辑</van-button>
    			<van-button type="danger" size="small">删除</van-button>
    		</div>
    	</div>

    	<div v-if="act == 2">
    		<div class="flexcc" style="padding-top: 1rem;" v-if="list == ''">
    			<div class="flexc" style="">
    				<div><img src="img/tx.webp" style="width: 0.4rem; margin-right: 0.1rem;"></div>
    				<div>
    					还没有联系人数据~
    					<span style="color:#1989fa;">点击新建  >></span>
    				</div>
    			</div>
    		</div>
    		<div  v-if="list != ''">
    			<div v-for="item in list" :key="item.id" class="yy" >
    				<div class="flexbc" style="border-bottom: 1px #ccc solid;">
    					<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">开发区万光科技产业园</div>
    					<div>
    						<img src="img/tx.webp" style="width: 0.4rem;">
    					</div>
    				</div>
    				<div class="flexc" style="padding: 0.2rem 0;">
    					<div style="flex: 1;">
    						<div style="color: #666;">张晓龙</div>
    						<div style="color: #999;">商务部   业务经理</div>
    					</div>
    					<div style="flex: 1;">
    						<div class="flexc" style="margin-bottom: 0.2rem;">
    							<div><img src="img/tx.webp" style="width: 0.3rem; margin-right: 0.1rem;"></div>
    							<div>15553587654</div>
    						</div>
    						<div class="flexc" style="margin-bottom: 0.2rem;">
    							<div><img src="img/tx.webp" style="width: 0.3rem; margin-right: 0.1rem;"></div>
    							<div>1084030564@qq.com</div>
    						</div>
    						<div class="flexc">
    							<div><img src="img/tx.webp" style="width: 0.3rem; margin-right: 0.1rem;"></div>
    							<div>开发区长江路01号</div>
    						</div>
    					</div>
    				</div>
    			</div>

    		</div>
    		<div class="flexcc" v-if="list != ''">
    			<div><img src="img/tx.webp" style="width: 0.4rem; margin-right: 0.1rem;"></div>
    			<div>点击添加联系人</div>
    		</div>
    	</div>

    	<div v-if="act == 3">
    		<div class="flexcc" style="padding-top: 1rem;" v-if="list == ''">
    			<div class="flexc" style="">
    				<div><img src="img/tx.webp" style="width: 0.4rem; margin-right: 0.1rem;"></div>
    				<div>
    					还没有联系人数据~
    					<span style="color:#1989fa;">点击新建  >></span>
    				</div>
    			</div>
    		</div>
    		<div   v-if="list != ''">
    			<div v-for="item in list" :key="item.id">
    				<div style="margin-bottom: 0.2rem;">2024年3月31日</div>
    				<div class="yy">
    					<div class="flexbc" style="border-bottom: 1px #ccc solid;">
    						<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">开发区万光科技产业园</div>
    						<div>
    							<img src="img/tx.webp" style="width: 0.4rem;">
    						</div>
    					</div>
    					<div class="flexc" style="padding: 0.2rem 0; font-size: 0.2rem;">
    						<div style="flex: 1;">
    							<div style="color: #666; margin-bottom: 0.1rem;">刘军 15553587654</div>
    							<div style="color: #999;">新客户   当面拜访</div>
    						</div>
    						<div style="flex: 1;">
    							<div style="color: #666; margin-bottom: 0.1rem;">创建时间</div>
    							<div style="color: #999;">2024-4-3 15:06:59</div>
    						</div>
    						<div style="flex: 1;">
    							<div style="color: #666; margin-bottom: 0.1rem;">审批状态</div>
    							<div style="color: #999;">待审批</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="flexcc" v-if="list != ''">
    			<div><img src="img/tx.webp" style="width: 0.4rem; margin-right: 0.1rem;"></div>
    			<div>点击添加联系人</div>
    		</div>
    	</div>


    </div>

    <van-popup v-model="tuihuilog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户退回至公海客户？</div>
    			<div>转移成功后，此客户数据将属于公共资源，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>
    <van-popup v-model="shanchulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户删除？</div>
    			<div>删除成功后，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>
  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
         act:3,
         tuihuilog:false,
         shanchulog:false,
         detail:""
			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {

      getlist:function(){
        axios.get('/Customer/queryCustomerDetail?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.detail = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      // @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
      sexConfirm:function(val){

      	this.sex.xuanzhong = val
      	console.log(this.sex.xuanzhong)
      	this.sex.log = false
      },
      sexCancel:function(val){
      	console.log(val)
      },
      sexChange:function(val){
      	console.log(val)
      }
    }
	}
</script>

<style scoped lang="less">
  .index {
    background: #fff;
    min-height: 100vh;
    width: 100vw;
    padding: 0.3rem;
    font-size: 0.25rem;

    img {
      max-width: 100%;
      display: block;
    }

    .flex {
      display: flex;
    }

    .flexc {
      display: flex;
      align-items: center;
    }

    .flexbc {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }
  }
</style>
